<!-- @format -->

<template>
 <view :class="`uno-p-y-[6px] uno-flex flex-justify-between task-cell-main ${customClass} uno-m-y-[14px]`">
  <view class="uno-text-[#666] uno-flex-1">
   <view class="reset-textarea-class !uno-m-t-[0] uno-text-[14px]" v-if="source.edit">
    <wd-textarea clear-trigger="focus" v-model="source.content" :maxlength="150" clearable auto-height show-word-limit> </wd-textarea>
   </view>
   <rich-text v-else :nodes="textareaToHtml"></rich-text>
  </view>
  <view class="uno-flex-shrink-0 uno-flex uno-flex-col uno-items-center uno-ml-[8px]">
   <template v-if="!unEdit">
    <view class="uno-text-[18px]" @click="removeSubTask">
     <wd-icon name="delete-thin" color="#999"></wd-icon>
    </view>
    <view :class="source.edit ? 'uno-text-[20px]' : 'uno-text-[16px]'" @click="showEditOrUpdateSubtask">
     <wd-icon :name="source.edit ? 'save' : 'edit-outline'" color="#999"></wd-icon>
    </view>
   </template>
   <view class="uno-flex uno-flex-col uno-items-center" :class="{ 'uno-pointer-events-none': source.status == '1' }" v-if="!unCheck && !source.edit">
    <wd-checkbox shape="square" size="large" true-value="1" false-value="0" checked-color="rgb(52, 209, 157)" v-model="source.status" @change="updateSubTask"></wd-checkbox>
   </view>
  </view>
 </view>
</template>

<script setup>
 import { computed } from 'vue';

 const Props = defineProps({
  unCheck: Boolean,
  unEdit: Boolean,
  customClass: String,
  source: {
   type: Object,
   default: () => ({}),
  },
 });
 const Emit = defineEmits(['update', 'change']);

 const textareaToHtml = computed(() => {
  return Props.source.content
   .split('\n')
   .map((paragraph) => `<p>${paragraph}</p>`)
   .join('');
 });
 //
 function updateSubTask() {
  Emit('change', {
   ...Props.source,
  });
 }

 function showEditOrUpdateSubtask() {
  console.log('我要打印的值:', 111);
  if (Props.source.edit) {
   updateSubTask();
  }
  Emit('update', {
   ...Props.source,
   edit: !Props.source.edit,
  });
 }
 //
 function removeSubTask() {
  Emit('change', {
   ...Props.source,
   delFlag: '1',
  });
 }
 //
</script>

<style lang="scss" scoped>
 .task-cell-main {
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  border-radius: 4px;
  padding: 10px;
 }
 .task-cell-main-edit {
 }
</style>
